<template>
	<view class="big_box">
		<u-navbar title="我的邀请" :autoBack="true"></u-navbar>

		<view class="container">
			<!-- 统计卡片 -->
			<view class="stats-card">
				<view class="stats-item">
					<text class="stats-number">{{ invitedData.total }}</text>
					<text class="stats-label">累计邀请</text>
				</view>
				
			</view>
			<!-- 邀请列表标题 -->
			<view class="list-header">
				<text class="list-title">已邀请用户</text>
				<text class="list-subtitle">共{{ invitedData.total }}人</text>
			</view>

			<!-- 邀请列表 -->
			<scroll-view class="list" scroll-y="true">
				<view class="" v-if="invitedData.list">
					<view class="empty-tip" v-if="invitedData.list.length === 0">
						<u-icon name="account-fill" size="50" color="#c0c4cc"></u-icon>
						<text class="empty-text">暂无邀请用户</text>
					</view>
				</view>
				

				<view class="list-item" v-for="item in invitedData.list" :key="item.id">
					<view class="user-info">
						<u-avatar :src="item.avatar" size="40"></u-avatar>
						<view class="user-details">
							<text class="user-name">{{ item.nickname }}</text>
							<!-- <text class="invite-time">{{ item.time }}</text> -->
						</view>
					</view>
				<!-- 	<view class="reward-tag">
						+{{ item.reward }}
					</view> -->
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import api from '@/api/index.js'
	export default {
		data() {
			return {
				todayInvited: 5,
				reward: '1,200',
				inviteCode: '7X9B2C',
				invitedData:{},
			}
		},
		computed: mapGetters(['isLogin', 'uid', 'userInfo']),
		onLoad() {
			this.getTeam()
		},
		methods: {
			copyCode() {
				uni.setClipboardData({
					data: this.inviteCode,
					success: () => {
						uni.showToast({
							title: '邀请码已复制'
						});
					}
				});
			},
			getTeam() {
				api.getTeam({
					page: 1
				}).then(res => {
					if (res.response.statusCode == 200) {
						this.invitedData=res.data.data
					}
				}).catch(err => {
					console.error(err)
				})
			},
			shareToWechat() {
				uni.showToast({
					title: '分享到微信好友'
				});
			},
			shareToMoment() {
				uni.showToast({
					title: '分享到朋友圈'
				});
			},
			shareToQQ() {
				uni.showToast({
					title: '分享到QQ好友'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex-center-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	@mixin flex-center-column {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.big_box {
		background-color: #f7f7f7;
		min-height: 100vh;
	}

	.container {
		padding: 20rpx;
		margin-top: 4rem;
	}

	// 统计卡片
	.stats-card {
		@include flex-center-between;
		background: linear-gradient(135deg, #7dc5eb, #65a0bd);
		border-radius: 16rpx;
		padding: 40rpx 30rpx;
		color: white;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

		.stats-item {
			@include flex-center-column;
			flex: 1;
		}

		.stats-divider {
			width: 1rpx;
			height: 60rpx;
			background-color: rgba(255, 255, 255, 0.3);
		}

		.stats-number {
			font-size: 40rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.stats-label {
			font-size: 24rpx;
			opacity: 0.9;
		}
	}

	// 邀请区域
	.invite-section {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.invite-code-card {
		@include flex-center-between;
		margin-bottom: 40rpx;

		.code-label {
			font-size: 28rpx;
			color: #606266;
		}

		.code-value {
			font-size: 40rpx;
			font-weight: bold;
			color: #303133;
			letter-spacing: 4rpx;
		}

		.copy-btn {
			width: 120rpx;
		}
	}

	.share-buttons {
		@include flex-center-between;

		.share-btn {
			@include flex-center-column;
			flex: 1;

			text {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #606266;
			}
		}
	}

	// 列表头部
	.list-header {
		@include flex-center-between;
		margin-bottom: 20rpx;
		padding: 0 10rpx;

		.list-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #303133;
		}

		.list-subtitle {
			font-size: 24rpx;
			color: #909399;
		}
	}

	// 列表区域
	.list {
		width: 92%;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0 30rpx;
		height: calc(100vh - 500rpx);
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

		.empty-tip {
			@include flex-center-column;
			padding: 100rpx 0;
			color: #c0c4cc;

			.empty-text {
				margin-top: 20rpx;
				font-size: 28rpx;
			}
		}
	}

	.list-item {
		@include flex-center-between;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f1f1f1;

		&:last-child {
			border-bottom: none;
		}

		.user-info {
			display: flex;
			align-items: center;

			.user-details {
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
			}

			.user-name {
				font-size: 30rpx;
				color: #303133;
				margin-bottom: 6rpx;
			}

			.invite-time {
				font-size: 24rpx;
				color: #909399;
			}
		}

		.reward-tag {
			background-color: #fff6e5;
			color: #ff9c19;
			font-size: 24rpx;
			padding: 8rpx 16rpx;
			border-radius: 20rpx;
			font-weight: bold;
		}
	}
</style>